<template>
  <div>
    <div class="title">
      {{devObj.deviceName}}
    </div>
    <div class="content">
      <div class="_tr">
        <div class="_l">设备状态：</div>
        <div
          class="_r"
          style="display:flex;align-items: center;"
        >
          <div v-if="devObj.deviceStatue=='0'">就绪</div>
          <div v-if="devObj.deviceStatue=='1'">在线</div>
          <div v-if="devObj.deviceStatue=='2'">离线</div>
          <div v-if="devObj.deviceStatue=='3'">待锁车</div>
          <div v-if="devObj.deviceStatue=='4'">锁车</div>
          <div v-if="devObj.deviceStatue=='0'" class="circle c_0" >&nbsp;</div>
          <div v-if="devObj.deviceStatue=='1'" class="circle c_1" >&nbsp;</div>
          <div v-if="devObj.deviceStatue=='2'" class="circle c_2" >&nbsp;</div>
          <div v-if="devObj.deviceStatue=='3'" class="circle c_3" >&nbsp;</div>
        </div>
      </div>
      <div class="_tr">
        <div class="_l">设备编码：</div>
        <div class="_r">{{devObj.deviceCode}}</div>
      </div>
      <div class="_tr">
        <div class="_l">产品类型：</div>
        <div class="_r">{{devObj.productTypeName}}</div>
      </div>

      <div class="_tr">
        <div class="_l">所属客户：</div>
        {{devObj.customerName}}
        <!-- <div class="_r"> <a
            style="font-size:13px;"
            href="javascript:;"
          >详情</a></div> -->
      </div>
      <div class="_tr">
        <div class="_l">出售时间：</div>
        <div class="_r">{{devObj.sellTime}}</div>
      </div>
      <div v-if="devObj.deviceStatue=='3'"  class="_tr">
        <div class="_l">锁定时间：</div>
        <div class="_r">{{devObj.lockTime}}</div>
      </div>
      <div class="_tr"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PopupContent',
  props: {	// 接收传来的数据
      type: Object,
      devObj:Object,
  }
}
</script>

<style scoped>
.title {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: black;
  border-bottom: 1px solid #e7ebf6;
  font-weight: 550;
}
.circle {
  width: 10px;
  height: 10px;
  border-radius: 10px; /* 图形的半径 */
  display: inline;
  margin-left: 5px;
}
.c_0{
  background-color: gray;
}
.c_1{
  background-color: green;
}
.c_2{
  background-color: red;
}
.c_3{
  background-color: rgb(20, 34, 99);
}
.content {
  padding-top: 10px;
  font-size: 16px;
  color: #001529;
}
._tr {
  display: flex;
  padding-bottom: 8px;
}

._l {
  width: 80px;
  text-align: right;
}
</style>